<template>
    <view>
        <uv-cell-group :border="false">
            <uv-cell title="我的兼职" :border="false">
                <template #value>
                    <view class="text-theme">
                        <uv-icon size="large" color="inhreit" name="plus" @click="toPublish"></uv-icon>
                    </view>
                </template>
            </uv-cell>
        </uv-cell-group>
        <view class="flex justify-between my-2">
            <view class="text-center px-4" @tap="toList(0)">
                <view class="text-theme flex justify-center badge-box">
                    <uv-icon size="40" color="inhreit" name="empty-history"></uv-icon>
                    <uv-badge absolute :value="computeBadge(0)" :offset="[0, 2]"></uv-badge>
                </view>
                <view>待审核</view>
            </view>
            <view class="text-center px-4" @tap="toList(1)">
                <view class="text-theme flex justify-center badge-box">
                    <uv-icon size="40" color="inhreit" name="file-text"></uv-icon>
                    <uv-badge absolute :value="computeBadge(1)" :offset="[0, 2]"></uv-badge>
                </view>
                <view>已通过</view>
            </view>
            <view class="text-center px-4" @tap="toList(2)">
                <view class="text-theme flex justify-center badge-box">
                    <uv-icon size="40" color="inhreit" name="empty-list"></uv-icon>
                    <uv-badge absolute :value="computeBadge(2)" :offset="[0, 2]"></uv-badge>
                </view>
                <view>已拒绝</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, defineExpose } from 'vue'
import { userBadgeSummary } from '@/services/part-time-job'

const source = ref([])

const computeBadge = computed(() => {
    return (key) => {
        const item = source.value.find(p => p.key == key)
        return item ? item.count : 0
    }
})

onMounted(() => {
    getData()
})

const toPublish = () => {
    uni.navigateTo({
        url: '/pages/publish/part-time-job'
    })
}

const toList = (status)=>{
    uni.navigateTo({
        url: `/pages/publish/part-time-job-list?status=${status}`
    })
}

const getData = () => {
    userBadgeSummary().then(data => {
        source.value = data
    }).catch(() => {

    })
}

defineExpose({ getData })

</script>
<style scoped >
.badge-box {
    position: relative;
}
</style>